import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt5Compat.GraphicalEffects

// 圆形任务按钮组件
Item {
    id: taskButton
    width: 30
    height: 30

    // 可配置属性
    property int number: 0                    // 按钮显示的数字
    property bool completed: false           // 任务完成状态
    property color normalColor: "#3498db"    // 正常状态颜色
    property color hoverColor: "#2980b9"     // 悬停状态颜色
    property color completedColor: "#2ecc71" // 完成状态颜色
    property color textColor: "white"        // 文本颜色

    // 点击信号
    signal clicked()

    // 主圆形按钮
    Rectangle {
        id: buttonCircle
        width: parent.width
        height: parent.height
        radius: width / 2
        color: {
            if (taskButton.completed)
                return taskButton.completedColor
            else if (buttonMouseArea.containsMouse)
                return taskButton.hoverColor
            else
                return taskButton.normalColor
        }

        // 阴影效果 - 与进度指示器风格一致
        layer.enabled: true
        layer.effect: DropShadow {
            transparentBorder: true
            horizontalOffset: 0
            verticalOffset: 4
            radius: 8
            samples: 17
            color: "#30000000"
        }

        // 内部数字
        Text {
            anchors.centerIn: parent
            text: taskButton.number
            font.pixelSize: 12
            font.bold: true
            color: taskButton.textColor
        }

        // 完成状态对勾图标
        Text {
            id: checkmark
            anchors {
                bottom: parent.bottom
                right: parent.right
                margins: 10
            }
            text: "✓"
            font.pixelSize: 20
            font.bold: true
            color: taskButton.textColor
            opacity: taskButton.completed ? 1 : 0

            Behavior on opacity {
                NumberAnimation { duration: 300 }
            }
        }

        // 颜色过渡动画
        Behavior on color {
            ColorAnimation { duration: 600 }
        }
    }

    // 鼠标交互区域
    MouseArea {
        id: buttonMouseArea
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        enabled: !taskButton.completed  // 完成状态下禁用

        onClicked: {
            // 点击动画
            clickAnimation.start()
            // 设置为完成状态
            // taskButton.completed = true
            // 发出点击信号
            taskButton.clicked()
        }
    }

    // 点击动画
    SequentialAnimation {
        id: clickAnimation

        // 缩小动画
        NumberAnimation {
            target: buttonCircle
            property: "scale"
            from: 1.0
            to: 0.9
            duration: 100
            easing.type: Easing.InOutQuad
        }

        // 恢复动画
        NumberAnimation {
            target: buttonCircle
            property: "scale"
            from: 0.9
            to: 1.0
            duration: 150
            easing.type: Easing.OutBack
        }
    }

}

